@tailwind base;
@tailwind components;
@tailwind utilities;

.overlay-enter {
  opacity: 0;
  transform: translateY(-30px);
}

.overlay-enter-active {
  opacity: 1;
  transform: translate(0);
  transition: all 200ms ease-out;
}

.overlay-exit {
  opacity: 1;
  transform: translate(0);
}

.overlay-exit-active {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 200ms ease-out;
}

/* ------------------------------------ X ----------------------------------- */

.nav-item-dropdown-enter {
  opacity: 0;
  transform: translateY(-30px);
}

.nav-item-dropdown-enter-active {
  opacity: 1;
  transform: translate(0);
  transition: all 200ms ease-out;
}

.nav-item-dropdown-exit {
  opacity: 1;
  transform: translate(0);
}

.nav-item-dropdown-exit-active {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 200ms ease-out;
}

/* ------------------------------------ X ----------------------------------- */

.language-switch-enter {
  opacity: 0;
  transform: translateY(-30px);
}

.language-switch-enter-active {
  opacity: 1;
  transform: translate(0);
  transition: all 200ms ease-out;
}

.language-switch-exit {
  opacity: 1;
  transform: translate(0);
}

.language-switch-exit-active {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 200ms ease-out;
}

/* ------------------------------------ X ----------------------------------- */

*::-webkit-scrollbar {
  display: none;
}

.home-about-us-container {
  position: relative;
  width: calc(100vw - 1.875rem);
  height: calc((100vw - 1.875rem) * 1.1913);
}

.home-about-us-picture-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc((100vw - 1.875rem) * 0.75);
  height: calc((100vw - 1.875rem) * 1.026);
}

.home-about-us-picture-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc((100vw - 1.875rem) * 0.4898);
  height: calc((100vw - 1.875rem) * 0.6521);
  border: 15px solid #211718;
}

@media (min-width: 1024px) {
  .home-about-us-container {
    position: relative;
    width: 23.5625rem;
    height: 27.8125rem;
  }

  .home-about-us-picture-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 17.5625rem;
    height: 23.8125rem;
  }

  .home-about-us-picture-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11.6875rem;
    height: 15.375rem;
    border: 20px solid #211718;
  }
}

@media (min-width: 1536px) {
  .home-about-us-container {
    position: relative;
    width: 35.34375rem;
    height: 41.71875rem;
  }

  .home-about-us-picture-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 26.34375rem;
    height: 35.71875rem;
  }

  .home-about-us-picture-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 17.53125rem;
    height: 23.0625rem;
    border: 30px solid #211718;
  }
}

.skeleton {
  background: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 80%
    )
    #d9d9d9;
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s loading ease-in-out infinite;
}

.hero-skeleton {
  background: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 80%
    )
    #333333;
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
  to {
    background-position-x: -20%;
  }
}
